<!doctype html>
<html>
<head>
    <meta charset="utf-8" content="width=device-width,initial-scale=1.0">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: helvetica, sans-serif;
        }

        @keyframes scaleDraw {
            0% {
                background-size: 150% 150%;
                -webkit-background-size: 150% 150%;
                -moz-background-size: 150% 150%;
                -ms-background-size: 150% 150%;
                /* transform: scale(1.5); */
            }
            50% {
                background-size: 125% 125%;
                -webkit-background-size: 125% 125%;
                -moz-background-size: 125% 125%;
                -ms-background-size: 125% 125%;
                /* transform: scale(1.25); */
            }
            100% {
                background-size: 100% 100%;
                -webkit-background-size: 100% 100%;
                -moz-background-size: 100% 100%;
                -ms-background-size: 100% 100%;
                /* transform: scale(1); */
            }
        }

        @media only screen {
            .container {
                background-image: url("mb.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                -webkit-background-size: 100% 100%;
                -moz-background-size: 100% 100%;
                -ms-background-size: 100% 100%;
                background-position: center;
                height: 100%;
                width: 100%;
                position: fixed;
                text-align: center;
                animation: scaleDraw 15s linear forwards;
                -webkit-animation: scaleDraw 15s linear forwards;
                -moz-animation: scaleDraw 15s linear forwards;
                -ms-animation: scaleDraw 15s linear forwards;
            }
        }

        @media screen and (min-width: 1024px) {
            .container {
                background: url("http://xaviermoon.gitee.io/ffxiv/bg.jpg") repeat-x;
                background-size: 100% 100%;
                -webkit-background-size: 100% 100%;
                -moz-background-size: 100% 100%;
                -ms-background-size: 100% 100%;
                background-position: center;
                height: 100%;
                width: 100%;
                position: fixed;
                text-align: center;
                animation: scaleDraw 15s linear forwards;
                -webkit-animation: scaleDraw 15s linear forwards;
                -moz-animation: scaleDraw 15s linear forwards;
                -ms-animation: scaleDraw 15s linear forwards;
            }
        }

        #play {
            color: white;
            background: rgba(11, 116, 142, 1);
            border: none;
            line-height: 30px;
            font-weight: bold;
            border-radius: 4px;
            cursor: pointer;
        }

        #play:hover {
            background: rgba(171, 243, 255, 1);
        }

        #server, #list {
            -webkit-box-shadow: 33px -27px 44px 7px rgba(0, 32, 53, 0.85), 48px 42px 44px 14px rgba(11, 116, 142, 0.85), 22px 50px 49px 14px rgba(12, 15, 93, 0.85), -38px 18px 49px 46px rgba(109, 173, 188, 0.85), inset 6px 7px 50px -1px rgba(171, 243, 255, 0.85), inset 6px 7px 50px -1px rgba(171, 243, 255, 0.85);
            box-shadow: 33px -27px 44px 7px rgba(0, 32, 53, 0.85), 48px 42px 44px 14px rgba(11, 116, 142, 0.85), 22px 50px 49px 14px rgba(12, 15, 93, 0.85), -38px 18px 49px 46px rgba(109, 173, 188, 0.85), inset 6px 7px 50px -1px rgba(171, 243, 255, 0.85), inset 6px 7px 50px -1px rgba(171, 243, 255, 0.85);
            border: 5px solid #1C6EA4;
            border-radius: 25px;
            border: 0px;
            color: white;
            padding-top: 20px;
            position: absolute;
            left: 60%;
            top: 20%;
            width: 350px;
            height: 350px;
            z-index: 2;
        }

        #list {
            transform: rotateY(180deg);
            opacity: 0;
            z-index: 1;
        }

        @keyframes fangun1 {
            from {
                opacity: 1;
                transform: rotateY(0deg);
                z-index: 2;
            }
            to {
                opacity: 0;
                transform: rotateY(180deg);
                z-index: 1;
            }
        }

        @keyframes fangun2 {
            from {
                opacity: 0;
                transform: rotateY(180deg);
                z-index: 1;
            }
            to {
                opacity: 1;
                transform: rotateY(360deg);
                z-index: 2;
            }
        }
    </style>
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?57157b043d7c03fb01abaa04bf3e8bcb";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

</head>

<body>
<div class="container">
    <div id="server" class="server" align="center">
        <div id='count' style="margin-bottom: 10px;font-size: 17px">
        </div>
        <div id='a' style="margin-bottom: 10px;font-size: 17px">

        </div>
        <div id="niao" style="cursor:pointer;margin-bottom: 10px;font-size: 30px">
            陆行鸟区 <span id="luxingniao">查询中...</span>
        </div>
        <div id="zhu" style="cursor:pointer;margin-bottom: 10px;font-size: 30px">
            莫古力区 <span id="moguli">查询中...</span>
        </div>
        <div id="mao" style="cursor:pointer;margin-bottom: 20px;font-size: 30px">
            猫小胖区 <span id="maoxiaopang">查询中...</span>
        </div>
        <div style="position:absolute;bottom: 0; padding-bottom: 20px;width:100%;font-size: 14px">
            <button id="play" onclick="playsound()">√ 点击开启上线提示音</button>
            <br>
            本页面不需要刷新,当所有大区上线后可能延迟一会才开放登录服务.<br>
            <a href="https://ngabbs.com/read.php?tid=20254421" target="_blank">讨论请移步NGA</a>
            <div style="font-size: 15px">
                Power By 海猫茶屋-银灰丶 海猫茶屋 一绯鞠一
            </div>
        </div>
    </div>
    <div id="list" class="list">
        <div id="niaolist" style="display: none">
            <div style="margin-bottom: 20px;font-size: 30px">
                萌芽池 <span id="mengyachi">查询中...</span>
            </div>
        </div>
        <div id="zhulist" style="display: none">

        </div>
        <div id="maolist" style="display: none">
            <div style="margin-bottom: 20px;font-size: 30px">
                海猫茶屋 <span id="haimaochawu">查询中...</span>
            </div>
        </div>
    </div>
</div>

<audio src='check.mp3' style='display:none' id='audio'></audio>
<audio src='online.mp3' style='display:none' id='online'></audio>
<script>
    var autoplay, p1, p2, p3 = false;
    var niao = document.getElementById('niao');
    var zhu = document.getElementById('zhu');
    var mao = document.getElementById('mao');
    var f = document.getElementById('server');
    var b = document.getElementById('list');
    var niaolist = document.getElementById('niaolist');
    var zhulist = document.getElementById('zhulist');
    var maolist = document.getElementById('maolist');

    var count = 0;


    function turnAround(type) {
        console.log(type);
        switch (type) {
            case 'niao':
                maolist.style.display = 'none';
                zhulist.style.display = 'none';
                niaolist.style.display = 'block';
                break;
            case 'zhu':
                maolist.style.display = 'none';
                zhulist.style.display = 'block';
                niaolist.style.display = 'none';
                break;
            case 'mao':
                maolist.style.display = 'block';
                zhulist.style.display = 'none';
                niaolist.style.display = 'none';
                break;
        }
        count++;
        if (count % 2 == 0) { // 偶数
            f.style.animation = "fangun2 1s linear alternate forwards";
            b.style.animation = "fangun1 1s linear alternate forwards";
        } else { // 奇数
            f.style.animation = "fangun1 1s linear alternate forwards";
            b.style.animation = "fangun2 1s linear alternate forwards";
        }
    }

    niao.addEventListener('click', function () {
        turnAround('niao')
    })
    zhu.addEventListener('click', function () {
        turnAround('zhu')
    })
    mao.addEventListener('click', function () {
        turnAround('mao')
    })
    b.addEventListener('click', function () {
        turnAround()
    })

    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    async function getStatus(id) {
        let maoxiaopang = document.getElementById("maoxiaopang");
        let luxingniao = document.getElementById("luxingniao");
        let moguli = document.getElementById("moguli");
        let count = document.getElementById("count");
        let haimaochawu = document.getElementById("haimaochawu");
        let mengyachi = document.getElementById("mengyachi");
        let resp = await fetch("http://ffxiv-cn.duckdns.org:31167/status", {
            headers: {
                'X-ID':id,
                'content-type': 'application/json'
            }
        },).catch((err) => {
            console.log(err)
            maoxiaopang.textContent = "施工中";
            luxingniao.textContent = "施工中";
            moguli.textContent = "施工中";
            haimaochawu.textContent = "施工中";
            mengyachi.textContent = "施工中"
        });

        let result = await resp.json()
        count.textContent = '在线人数:'+result.U +' 第 ' + result.C + " 次查询大区状态";
        if (result.maoxiaopang == "true") {
            maoxiaopang.textContent = "Online";
            play(p3);
            p3 = true;

        } else {
            maoxiaopang.textContent = "Offline";
            p3 = false;

        }
        if (result.moguli == "true") {
            moguli.textContent = "Online";
            play(p2);
            p2 = true;
        } else {
            moguli.textContent = "Offline"
            p2 = false;
        }
        if (result.luxingniao == "true") {
            luxingniao.textContent = "Online"
            play(p1);
            p1 = true;
        } else {
            luxingniao.textContent = "Offline"
            p1 = false;
        }

        if (result.haimaochawu == "true") {
            haimaochawu.textContent = "Online"
        } else {
            haimaochawu.textContent = "Offline"
        }
        if (result.mengyachi == "true") {
            mengyachi.textContent = "Online"
        } else {
            mengyachi.textContent = "Offline"
        }

    }

    function uuid() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext("2d");
        var txt = "ffxiv";
        ctx.textBaseline = "top";
        ctx.font = "14px 'Arial'";
        ctx.textBaseline = "tencent";
        ctx.fillStyle = "#f60";
        ctx.fillRect(125, 1, 62, 20);
        ctx.fillStyle = "#069";
        ctx.fillText(txt, 2, 15);
        ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
        ctx.fillText(txt, 4, 17);

        var b64 = canvas.toDataURL().replace("data:image/png;base64,", "");
        var bin = atob(b64);
        var crc = bin2hex(bin.slice(-16, -12));
        return crc;
    }

    function bin2hex(s) {
        let i, l, o = '',
            n;

        s += '';

        for (i = 0, l = s.length; i < l; i++) {
            n = s.charCodeAt(i)
                .toString(16);
            o += n.length < 2 ? '0' + n : n;
        }

        return o;
    }


    async function play(p) {
        if (!p && autoplay) {
            document.getElementById('audio').play();
            if (p1 && p2 && p3) {
                let i = 5;
                document.getElementById('online').play();
                while (i--) {
                    await sleep(100);
                    document.getElementById('online').play();
                }

            }
        }

    }

    async function show() {
        let id=uuid()
        while (true) {
            getStatus(id);
            await sleep(1000);

        }

    }

    function playsound() {
        var self = document.getElementById('play');
        var parent = self.parentElement;
        parent.removeChild(self);
        autoplay = true;
        document.getElementById('audio').play();
    }

    show()
</script>
</body>

</html>

